<template>
        <!-- <movable-view 
    class="list-item" 
    style="{{styles}} {{customStyle}}"
    list="{{list}}"
    order="{{order}}"
    capture-catch:touchstart=""
    bindlongpress="bindlongpress"
    bindtouchstart="bindtouchstart"
    bindtouchmove="bindtouchmove"
    bindtouchend="bindtouchend"
>
<slot></slot>
</movable-view> -->

	<movable-view :x="x" :y="y" class="list-item" :style="styles + ' ' + customStyle">
		<slot></slot>
	</movable-view>
</template>

<script>
// components/list-item/list-item.js
export default {
    data() {
        return {
            isTouch: false,
            startY: 0,
            endY: 0,
            customStyle: '',
            height: 0,
            x: '',
            y: ''
        };
    },
    options: {
        multipleSlots: true // 在组件定义时的选项中启用多slot支持
    },
    /**
     * 组件的属性列表
     */
    props: {
        styles: {
            type: String,
            default: ''
        },
        list: {
            type: Array,
            default: () => []
        },
        order: {
            type: Number,
            default: 0
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        bindlongpress(ev) {
            console.log('bindlongpress:', ev);
			this.isTouch = true,
			this.customStyle = 'transform: scale(0.97)'
            this.createSelectorQuery()
                .selectAll('.list-item')
                .fields(
                    {
                        size: true
                    },
                    (res) => {
                        // console.log(res);
                        this.height = Math.floor(res[0].height)
                    }
                )
                .exec();
        },

        bindtouchstart(ev) {
            console.log('bindtouchstart:', ev);

            if (!this.isTouch) {
                return;
            }

            let startY = ev.touches[0].pageY;
            this.startY = startY
        },

        bindtouchmove(ev) {
            console.log('bindtouchmove:', ev);

            if (!this.isTouch) {
                return;
            }

            let endY = ev.touches[0].pageY;
            console.log(endY);
            let customStyle = `transform:translateY(${endY}rpx) scale(0.97)`;
			this.endY: endY
			this.customStyle: customStyle
        },

        bindtouchend(ev) {
            console.log('bindtouchend:', ev);

            if (!this.isTouch) {
                return;
            }

            let distance = this.endY - this.startY;
            console.log('height:', this.height);
            console.log('startY:', this.startY);
            console.log('endY:', this.endY);
            console.log('distance:', distance);

            if (distance > this.height) {
                let i = Math.floor(distance / this.height);
                console.log('i:', i);
                let order = this.list[this.order - 1].order;
                this.list[this.order - 1].order = this.list[this.order + i - 1].order;
                this.list[this.order + i - 1].order = order;
            }

            console.log('list:', this.list);
            this.isTouch = false,
            this.customStyle = `transform:translateY(${this.endY}rpx)`
        }
    }
};
</script>
<style>
.list-item {
    width: 100%;
    height: 100rpx;
    color: #ffffff;
    align-items: center;
    display: flex;
}
</style>
